<template>
  <div>
    <el-row>
      <el-col :span="16" :offset="4">
        <div class="head">
          <div>
            <span>实时概况</span>
          </div>
          <div>
            <span>更新时间:{{ date }}</span>
          </div>
        </div>
        <div class="top">
          <div id="top-echarts"></div>
          <el-row>
            <el-col :offset="1"
              ><div>
                <p>支付金额(元)</p>
                <h1>12222</h1>
                <p>较上期</p>
              </div></el-col
            >
            <el-col :offset="1"
              ><div>
                <p>支付金额(元)</p>
                <h1>12222</h1>
                <p>较上期</p>
              </div></el-col
            >
            <el-col :offset="1"
              ><div>
                <p>支付金额(元)</p>
                <h1>12222</h1>
                <p>较上期</p>
              </div></el-col
            >
            <el-col :offset="1"
              ><div>
                <p>支付金额(元)</p>
                <h1>12222</h1>
                <p>较上期</p>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="center">
          <div>
            <p>常用功能</p>
            <el-row>
              <el-col :offset="2">11</el-col>
              <el-col :offset="2">11</el-col>
              <el-col :offset="2">11</el-col>
              <el-col :offset="2">11</el-col>
              <el-col :offset="2">11</el-col>
              <el-col :offset="2">11</el-col>
              <el-col :offset="2">11</el-col>
              <el-col :offset="2">11</el-col>
              <el-col :offset="2">11</el-col>
              <el-col :offset="2">11</el-col>
            </el-row>
          </div>
          <div>
            <el-row>
              <el-col :span="16">公告中心</el-col>
              <el-col :span="8">查看全部></el-col>
            </el-row>
            <el-row>
              <el-col :span="16">限时折扣分析功能上线</el-col>
              <el-col :span="8">04/12</el-col>
            </el-row>
            <el-row>
              <el-col :span="16">限时折扣分析功能上线</el-col>
              <el-col :span="8">04/12</el-col> </el-row
            ><el-row>
              <el-col :span="16">限时折扣分析功能上线</el-col>
              <el-col :span="8">04/12</el-col> </el-row
            ><el-row>
              <el-col :span="16">限时折扣分析功能上线</el-col>
              <el-col :span="8">04/12</el-col> </el-row
            ><el-row>
              <el-col :span="16">限时折扣分析功能上线</el-col>
              <el-col :span="8">04/12</el-col> </el-row
            ><el-row>
              <el-col :span="16">限时折扣分析功能上线</el-col>
              <el-col :span="8">04/12</el-col>
            </el-row>
            <el-row>
              <el-col :span="16">限时折扣分析功能上线</el-col>
              <el-col :span="8">04/12</el-col>
            </el-row><el-row>
              <el-col :span="16">限时折扣分析功能上线</el-col>
              <el-col :span="8">04/12</el-col>
            </el-row>
          </div>
        </div>
        <div class="bottom">
          <el-row>
            <el-col :span="22" :offset="1">
              <p>会员数据表</p>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址"> </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data: function () {
    return {
      date: new Date(),
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    // console.log("------",document.getElementById("topecharts"))

    var myChart = echarts.init(document.getElementById("top-echarts"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
div {
  border-radius: 16px;
}
.el-col {
  > div:first-child {
    margin-bottom: 20px;
  }
  > div {
    margin-bottom: 40px;
  }
}
.head {
  display: flex;
  height: 60px;
  line-height: 60px;
  div:first-child {
    height: 60px;
    line-height: 60px;
    font-size: 26px;
    margin-right: 40px;
  }
}
.top {
  display: flex;
  > div:first-child {
    width: 1050px;
    height: 303px;
    margin-right: 20px;
  }
 .el-col {
      width: 283px;
      height: 140px;
      background: #fff;
      margin-bottom: 20px;
  }
}
.center {
  display: flex;
  > div:first-child {
    width: 909px;
    height: 346px;
    background: #fff;
    margin-right: 25px;
    .el-row {
      margin-top: 30px;
      .el-col {
        width: 64px;
        height: 100px;
        margin-bottom: 37px;
        border:1px solid red
      }
    }
  }
  > div:last-child {
    width: 288px;
    height: 346px;
    border: 1px solid green;
    background: #fff;
    overflow: hidden;
    .el-col {
      text-align: center;
      margin-top: 20px;
    }
  }
}
.bottom {
  background: #fff;
  .el-pagination {
    text-align: end;
  }
}
</style>